<template>
    <div>
        <a-input-search v-model:value="searchValue" style="margin-bottom: 8px" placeholder="Search" />
        <!-- :expanded-keys="expandedKeys" :auto-expand-parent="autoExpandParent" -->
        <a-tree v-if="treeData.length > 0" :default-expand-all="true" :tree-data="treeData" :field-names="fieldNames" @select="selectFn" class="myTree">
            <template #title="{ name, quotas }">
                <span v-if="name.indexOf(searchValue) > -1">
                    {{ name.substr(0, name.indexOf(searchValue)) }}
                    <span style="color: #f50">{{ searchValue }}</span>
                    {{ name.substr(name.indexOf(searchValue) + searchValue.length) }}
                </span>
                <span v-else>{{ name }}</span>
                <template v-if="quotas && quotas[0] && quotas[0]?.warn_level">
                    <a-tag v-for="item in quotas" :key="item.warn_level" :color="item.warn_color">{{ item.warn_color_cn || '正常' }}</a-tag>
                </template>
            </template>
        </a-tree>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue';

defineProps({
    treeData: Array,
});

const $emit = defineEmits(['changeRegionCode']);

const searchValue = ref('');
const fieldNames = {
    children: 'children',
    title: 'name',
    key: 'code',
};
const selectFn = (selectedKeys, info) => {
    console.log('selectedKeys---', selectedKeys);
    console.log('info---', info);
    $emit('changeRegionCode', selectedKeys);
};
</script>
<style lang="less" scoped>
.myTree .ant-tag{
    border-radius: 50%;
    padding: 0 4px;
    margin: 0 2px;
}
</style>
